@orderly.network/trading-leaderboard 2.8.6 → 2.8.7-alpha.0

package/dist/index.d.mts

@@ -446,6 +446,7 @@ type RankingProps = {
 } & Omit<GeneralRankingScriptReturn, "dataList" | "dataSource"> & {
     dataList: RankingData[];
     dataSource: RankingData[];
+    type?: "general" | "campaign";
 };
 declare const Ranking: FC<RankingProps>;
 

package/dist/index.d.ts

@@ -446,6 +446,7 @@ type RankingProps = {
 } & Omit<GeneralRankingScriptReturn, "dataList" | "dataSource"> & {
     dataList: RankingData[];
     dataSource: RankingData[];
+    type?: "general" | "campaign";
 };
 declare const Ranking: FC<RankingProps>;
 

package/dist/index.js

@@ -1549,7 +1549,7 @@ function isSameAddress2(address1, address2) {
 function getCurrentAddressRowKey(address) {
   return `current-address-${address?.toLowerCase()}`;
 }
-var useRankingColumns = (fields, address, enableSort, brokerId) => {
+var useRankingColumns = (fields, address, enableSort, type) => {
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
   return react.useMemo(() => {
@@ -1608,7 +1608,7 @@ var useRankingColumns = (fields, address, enableSort, brokerId) => {
             "a",
             {
               className: "oui-flex oui-items-start oui-gap-1",
-              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${brokerId}`,
+              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${record.broker_id}`,
               target: "_blank",
               rel: "noreferrer",
               children: [
@@ -1636,7 +1636,7 @@ var useRankingColumns = (fields, address, enableSort, brokerId) => {
         width: 90
       },
       {
-        title: t("tradingLeaderboard.tradingVolume"),
+        title: /* @__PURE__ */ jsxRuntime.jsx(VolumeColumnTitle, {}),
         dataIndex: "volume",
         onSort: enableSort,
         align: isMobile ? "right" : "left",
@@ -1649,7 +1649,7 @@ var useRankingColumns = (fields, address, enableSort, brokerId) => {
         width: 105
       },
       {
-        title: t("common.pnl"),
+        title: /* @__PURE__ */ jsxRuntime.jsx(PnLColumnTitle, { type }),
         dataIndex: "pnl",
         onSort: enableSort,
         align: isMobile ? "right" : "left",
@@ -1685,7 +1685,7 @@ var useRankingColumns = (fields, address, enableSort, brokerId) => {
     return columns.filter(
       (column) => fields?.includes(column.dataIndex)
     );
-  }, [t, isMobile, address, fields, enableSort, brokerId]);
+  }, [t, isMobile, address, fields, enableSort, type]);
 };
 var FirstRankIcon = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1805,13 +1805,50 @@ var ThirdRankIcon = () => {
     }
   );
 };
+var PnLColumnTitle = ({ type }) => {
+  const { isMobile } = ui.useScreen();
+  const { t } = i18n.useTranslation();
+  const tooltipContent = type === "general" ? t("tradingLeaderboard.realizedPnl.tooltip") : t("tradingLeaderboard.pnl.tooltip");
+  const longPress = ui.useLongPress(() => {
+    ui.modal.alert({
+      title: t("common.tips"),
+      message: tooltipContent
+    });
+  });
+  const view = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: type === "general" ? t("common.realizedPnl") : t("common.pnl") }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.InfoCircleIcon, { opacity: 1, className: "w-4 h-4 cursor-pointer" })
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...longPress, children: view });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: tooltipContent, children: view });
+};
+var VolumeColumnTitle = () => {
+  const { isMobile } = ui.useScreen();
+  const { t } = i18n.useTranslation();
+  const tooltipContent = "Total trading volume generated during the campaign period. Updated every 30 seconds.";
+  const longPress = ui.useLongPress(() => {
+    ui.modal.alert({
+      title: t("common.tips"),
+      message: tooltipContent
+    });
+  });
+  const view = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("tradingLeaderboard.tradingVolume") }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.InfoCircleIcon, { opacity: 1, className: "w-4 h-4 cursor-pointer" })
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...longPress, children: view });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: tooltipContent, children: view });
+};
 var Ranking = (props) => {
-  const brokerId = hooks.useConfig("brokerId");
   const column = useRankingColumns(
     props.fields,
     props.address,
     typeof props.onSort === "function",
-    brokerId
+    props.type
   );
   const { isMobile } = ui.useScreen();
   const onRow = react.useCallback(
@@ -2278,7 +2315,7 @@ var GeneralRankingWidget = (props) => {
     address,
     sortKey
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Ranking, { ...state, ...rest, fields });
+  return /* @__PURE__ */ jsxRuntime.jsx(Ranking, { ...state, ...rest, fields, type: "general" });
 };
 
 // src/components/rewards/utils.ts
@@ -2711,7 +2748,7 @@ var CampaignRankingWidget = (props) => {
     campaignId,
     sortKey
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Ranking, { ...state, ...rest, fields });
+  return /* @__PURE__ */ jsxRuntime.jsx(Ranking, { ...state, ...rest, fields, type: "campaign" });
 };
 var FilterDays2 = [7, 14, 30, 90];
 function useGeneralLeaderboardScript(options) {
@@ -5475,7 +5512,7 @@ function isSameAddress3(address1, address2) {
 function getCurrentAddressRowKey2(address) {
   return `current-address-${address?.toLowerCase()}`;
 }
-var useRankingColumns2 = (fields, address, enableSort, brokerId) => {
+var useRankingColumns2 = (fields, address, enableSort, type) => {
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
   return react.useMemo(() => {
@@ -5534,7 +5571,7 @@ var useRankingColumns2 = (fields, address, enableSort, brokerId) => {
             "a",
             {
               className: "oui-flex oui-items-start oui-gap-1",
-              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${brokerId}`,
+              href: `https://orderly-dashboard.orderly.network/address/${value}?broker_id=${record.broker_id}`,
               target: "_blank",
               rel: "noreferrer",
               children: [
@@ -5611,7 +5648,7 @@ var useRankingColumns2 = (fields, address, enableSort, brokerId) => {
     return columns.filter(
       (column) => fields?.includes(column.dataIndex)
     );
-  }, [t, isMobile, address, fields, enableSort, brokerId]);
+  }, [t, isMobile, address, fields, enableSort, type]);
 };
 var FirstRankIcon2 = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5732,12 +5769,11 @@ var ThirdRankIcon2 = () => {
   );
 };
 var Ranking2 = (props) => {
-  const brokerId = hooks.useConfig("brokerId");
   const column = useRankingColumns2(
     props.fields,
     props.address,
     typeof props.onSort === "function",
-    brokerId
+    props.type
   );
   const { isMobile } = ui.useScreen();
   const onRow = react.useCallback(
@@ -6152,7 +6188,7 @@ var GeneralRankingWidget2 = (props) => {
     sortKey,
     weekOneAddresses
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Ranking2, { ...state, ...rest, fields });
+  return /* @__PURE__ */ jsxRuntime.jsx(Ranking2, { ...state, ...rest, fields, type: "general" });
 };
 var LeaderboardFilter2 = (props) => {
   const { t } = i18n.useTranslation();